<form [formGroup]="searchForm" (ngSubmit)="onSearch()" novalidate>
  <div class="form-group" [class.has-error]="searchForm.hasError('minlength','productName')">
    <label for="productName">商品名称</label>
    <input formControlName="productName" type="text" class="form-control" id="productName" placeholder="商品名称" name="productName">
    <!-- <span class="help-block" [class.hidden]="!searchForm.hasError('required','productName')" [hidden]="searchForm.get('productName').valid || searchForm.get('productName').untouched">商品名必填</span> -->
    <span class="help-block" [class.hidden] = "!searchForm.hasError('minlength','productName')">商品名称的至少要三个字符串</span>
  </div>
  <div class="form-group" [class.has-error]="searchForm.hasError('productPrice','productPrice')">
      <label for="productPrice">商品价格</label>
      <input formControlName="productPrice" type="number" class="form-control" id="productPrice" placeholder="商品价格" name="productPrice">
      <span class="help-block" [class.hidden]="!searchForm.hasError('productPrice','productPrice')">商品价格必须是非负数</span>
  </div>
  
  <div class="form-group">
      <label for="productCategory">商品类别</label>
      <select formControlName="productCategory" name="productCategory" id="productCategory" class="form-control">
        <option value="-1">全部分类</option>
        <option *ngFor="let category of productCategory" [value]="category">{{ category }}</option>
      </select>
  </div>
  
  <div class="form-group">
      <button type="submit" class="btn btn-primary btn-block">搜索</button>
  </div>  
</form>
